<template>
  <div class="aui-card-list log-error-stat">
    <uni-list-query-card :queryShow="queryShow" @query-click="searchListEvent" @click="(e)=>{this.queryShow=e}"
      @searchReset="searchReset()">
      <el-col :span="15">
        <el-tabs v-model="activeName" type="card" @tab-click="searchListEvent">
          <el-tab-pane label="今天" name="1"></el-tab-pane>
          <el-tab-pane label="昨天至今" name="2"></el-tab-pane>
          <el-tab-pane label="七天前至今" name="3"></el-tab-pane>
        </el-tabs>
      </el-col>
    </uni-list-query-card>
    <el-card shadow="never" class="aui-card-list-body">
      <vxe-toolbar :setting="{immediate:true}">
        <template v-slot:buttons>
        </template>
        <template v-slot:tools>
          <el-button icon="el-icon-refresh" @click="searchListEvent" circle></el-button>
          <el-dropdown trigger="click" style="padding-left: 5px;" placement="bottom">
            <el-button icon="el-icon-download" circle>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-bottom" @click.native="exportHandle(true)">导出当前页</el-dropdown-item>
              <el-dropdown-item icon="el-icon-download" @click.native="exportHandle()">全部导出
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <el-button icon="el-icon-download" @click="$refs.xTable.openExport()" circle></el-button> -->
        </template>
      </vxe-toolbar>
      <div class="aui-card-list-body-table">
        <vxe-table :loading="dataListLoading" :data="dataList" ref="xTable" auto-resize remote-sort @sort-change="dataListSortChangeHandle"
          class="vxe-table-element" max-height="auto">
          <vxe-table-column type="index" width="50" align="center"></vxe-table-column>
          <!-- <vxe-table-column field="exNum" title="logError.exNum" width="120" align="center"></vxe-table-column> -->
          <vxe-table-column field="requestUri" title="logError.requestUri" sortable></vxe-table-column>
          <vxe-table-column field="cnt" title="异常数量" width="120" align="center"></vxe-table-column>
          <vxe-table-column title="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-view" size="small" @click="openErrorList(scope.row)" align="center">{{
                '查看明细' }}
              </el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss">
</style>

<script>
import mixinViewModule from '@/mixins/view-module'
import { fnUserAgent } from '@/utils/ua'
import moment from 'moment'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        activatedIsNeed: false,
        getDataListURL: '/sys/log/error/statPage',
        getDataListIsPage: true,
        exportURL: '/sys/log/error/exportStat'
      },
      activeName: '1',
      dataForm: {
        exNum: ''
      }
    }
  },
  activated () {
    this.searchListEvent()
  },
  methods: {
    searchListEvent () {
      if (this.activeName === '1') {
        this.dataForm.createDateBegin = moment().add(0, 'd').format('YYYY-MM-DD 00:00:00')
        this.dataForm.createDateEnd = moment().add(1, 'd').format('YYYY-MM-DD 00:00:00')
      } else if (this.activeName === '2') {
        this.dataForm.createDateBegin = moment().add(-1, 'd').format('YYYY-MM-DD 00:00:00')
        this.dataForm.createDateEnd = moment().add(1, 'd').format('YYYY-MM-DD 00:00:00')
      } else if (this.activeName === '3') {
        this.dataForm.createDateBegin = moment().add(-6, 'd').format('YYYY-MM-DD 00:00:00')
        this.dataForm.createDateEnd = moment().add(1, 'd').format('YYYY-MM-DD 00:00:00')
      }
      this.page = 1
      this.getDataList()
    },
    // 异常信息
    infoHandle (info) {
      this.$alert(info, this.$t('logError.errorInfo'), {
        customClass: 'mod-sys__log-error-view-info'
      })
    },
    // 识别设备
    userAgent (userAgent) {
      return fnUserAgent(userAgent)
    },
    // 打开明细
    openErrorList (row) {
      // 打开路由
      var router = {
        name: 'sys-log-error-1',
        id: this.$xeutils.timestamp(),
        menuId: this.$route.meta.menuId,
        oldName: 'sys-log-error-stat',
        path: 'sys/log-error',
        title: '系统异常日志'
      }
      var params = {
        row: row,
        dateTimeRange: [this.dataForm.createDateBegin, this.dataForm.createDateEnd],
        timestamp: this.$xeutils.timestamp()
      }
      this.$options.methods.openNewTab(this.$router, router, params)
    }
  }
}
</script>

<style lang="scss">
.el-message-box.mod-sys__log-error-view-info {
  width: 80%;
  height: 600px;
}
.mod-sys__log-error-view-info .el-message-box__content {
  height: 510px;
  overflow-y: auto;
}
</style>
